<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <style type="text/css">
    html,body{
      height:100%;
      width:100%;
      padding:0;
      margin:0;
    }
    .main{
      height: 100%;

    }
    .main_top{
      border: 1px solid #e4e7ed;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      box-sizing: border-box;
      white-space: nowrap;
      position: relative;
      transition: transform .3s;
      float: left;
      margin: 10px;
      z-index: 2;
      margin-bottom: -1px;
    }
    .main_top a{
      padding: 0 20px;
      margin: 0 -2px;
      text-decoration: unset;
      height: 35px;
      box-sizing: border-box;
      line-height: 35px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      position: relative;
      border-left: 1px solid #e4e7ed;
      transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
    }
    .main_top a:first-child{
      border-left: 1px solid transparent;

    }
    .main_top a.active{
      color: #409eff;
      border-bottom: 1px solid #fff;
    }
    .main_center{
      clear: both;
      display: flex;
      border: 1px solid #e4e7ed;
      margin-top: 0;
      margin: 10px;
      height: 300px;
    }
    .main_center_left,.main_center_right{
      width: calc(50% - 21px);
      padding: 10px;
      height: calc(100% - 20px);
      float:left;
    }
    .main_center_left{
      border-right: 1px solid #e4e7ed;
      overflow: auto;
    }
    .main_center_right button{
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid #409eff;
      color: #fff;
      background-color: #409eff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: .1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 7px 15px;
      margin-right: 5px;
      font-size: 14px;
      border-radius: 4px;
    }
    .main_bottom{

    }
    .main_center .box{
      display:none;
      width: 100%;
      height: 100%;
    }
    .input_box{
      display: block;
      resize: vertical;
      padding: 5px 15px;
      line-height: 1.5;
      box-sizing: border-box;
      font-size: inherit;
      color: #606266;
      background-color: #fff;
      background-image: none;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      margin: 10px;
      width: calc(100% - 20px);
      min-height: 100px;
    }
    .main_bottom p{
      font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
    margin: 10px;
    margin-top: 0;
    }
    .main_bottom>div{
      margin-bottom: 10px;
      text-align: center;
    clear: both;
    }
    .main_bottom button{
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: .1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 7px 15px;
      margin-right: 5px;
      font-size: 14px;
      border-radius: 4px;
    }
    .main_bottom .save{
      border: 1px solid #409eff;
      color: #fff;
      background-color: #409eff;

    }
    .main_bottom .resize{
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;

    }
    select{
      width: 182px;
      border: 1px solid #e6e6e6;
      border-radius: 2px;
      padding: 0 5px;
      height: 38px;
      line-height: 1.3;
    }
    select option{
      height: 36px;
    }
    .layui-layer-page .layui-layer-content {
      padding-top: 20px;
  }
  .layui-input-block {
    margin-left: 130px;
    min-height: 36px;
    margin-right: 35px;
  }
  .layui-form-label{
    width: 110px;padding-right: 0px;
  }
  </style>
  <link rel="StyleSheet" href="../approver/css/dtree.css" type="text/css"/>
  <link rel="stylesheet" type="text/css" href="../approver/css/zTreeStyle.css"/>
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
  <script src="../approver/js/jquery.min.js"></script>
  <script src="../approver/js/jquery.ztree.core-3.5.js" type="text/javascript" charset="utf-8"></script>
  <script src="../approver/js/jquery.ztree.excheck-3.5.js" type="text/javascript" charset="utf-8"></script>
  <script src="../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../js/selectFilter.css">
  <script src="../js/selectFilter.js"></script>
</head>
<body>
<div class="main">
  <div class="main_top">
    <a class="active" href="javascript:;">表单属性</a>
	  <a href="javascript:;">流程属性</a>
	  <a href="javascript:;">自定义监听器</a>
  </div>

  <div class="main_center">
    <!--表单属性-->
    <div class="box">
      <div class="main_center_left ztree" id="form_tree">

      </div>
      <div class="main_center_right">
        <button onclick="btnOnClick('并且','&&')">并且</button>
        <button onclick="btnOnClick('或','||')" >或</button>
        <button onclick="btnOnClick('不成立','!')" >不成立</button>
        <button onclick="btnOnClick('(','(')" >(</button>
        <button onclick="btnOnClick(')',')')" >)</button>
      </div>
    </div>
    <!--流程属性-->
    <div class="box">
      <div class="main_center_left ztree" id="process_tree">

      </div>
      <div class="main_center_right">
        <button onclick="btnOnClick('并且','&&')">并且</button>
        <button onclick="btnOnClick('或','||')" >或</button>
        <button onclick="btnOnClick('不成立','!')" >不成立</button>
        <button onclick="btnOnClick('(','(')" >(</button>
        <button onclick="btnOnClick(')',')')" >)</button>
      </div>
    </div>

    <!--表达式-->
    <div class="box">
      <textarea class="input_box" id="customListeners" rows="5" cols="5"></textarea>
    </div>

  </div>
  <div class="main_bottom">
    <p>
      计算公式:
      <span id="showValue"></span>
      <span id="hideValue" style="display: none"></span>
    </p>
    <p>
      历史公式:
      <span id="oldValue"></span>
    </p>
    <div>
      <button class="save" onclick="saveConditions()">保存</button>
      <button class="resize" onclick="reset()">重置</button>
    </div>
  </div>

</div>


<script type="text/javascript">
  $(function () {
    $(".main_center").find(".box:first").show();
    $(".main_top a").on("click", function () {
      var index = $(this).index();
      $(this).parent().next().find(".box").hide().eq(index).show();
      $(this).addClass("active").siblings().removeClass("active");
    })
  })

  //重置
  function reset() {
    $("#showValue").html("");
    $("#hideValue").html("");
  }



  //获取流程属性的树结构数据
  function getProcessProperties() {
    var  approvalNodedata = [];
    if (window.parent.formPropertiesTemp !== null && window.parent.formPropertiesTemp.formProperties !== undefined && window.parent.formPropertiesTemp.formProperties  !== null){
      for (var i = 0; i < window.parent.formPropertiesTemp.formProperties.length ; i++) {
        var column = window.parent.formPropertiesTemp.formProperties[i];
        //字典类型
        if ("enum" === column.type) {
          approvalNodedata.push({id:column.id,value:column.id,name:column.name,type:'enum',enumValues:column.enumValues,prefix:'act_process'})
        } else
        //字符串类型
        if ("string" === column.type) {
          approvalNodedata.push({id:column.id,value:column.id,name:column.name,type:'String',prefix:'act_process'})
        }
      }
    }

    approvalNodedata.push({id:"sqrzw",value:"sqrzw",pId:"0", name:"申请人岗位",type:"String",prefix:'act_process'});
    approvalNodedata.push({id:"sqrbm",value:"sqrbm", pId:"0", name:"申请人部门",type:"Office",prefix:'act_process'});
    approvalNodedata.push({id:"sqrbmjs",value:"sqrbmjs", pId:"0", name:"申请人部门角色",type:"bmjs",prefix:'act_process'});
    approvalNodedata.push({id:"sysqrzw",value:"sysqrzw", pId:"0", name:"上一审批人职位",type:"String",prefix:'act_process'});
    approvalNodedata.push({id:"sysqrbm",value:"sysqrbm", pId:"0", name:"上一审批人部门",type:"com.jesims.modules.sys.entity.Office",prefix:'act_process'});
    approvalNodedata.push({id:"sysqrbmjs",value:"sysqrbmjs", pId:"0", name:"上一审批人部门角色",type:"bmjs",prefix:'act_process'});

    $.fn.zTree.init($("#process_tree"), setting, approvalNodedata);
  }


  function getFormField(){
    //模型ID
    var modelId = getUrlParam('modelId');
    $.ajax({
      url: window.parent.getBackUrl() + "/act/model/getFormField/"+modelId,
      dataType: 'json',
      type: "GET",
      async: false,
      cache: false,
      headers: {
        'Authorization':window.parent.getToken(),
      },
      success: function (data) {

        $.fn.zTree.init($("#form_tree"), setting, data.data);
      }
    });
  }

  //表单字段树形结构配置
  var setting = {
    check: {
      chkboxType: {"Y": "s", "N": "s"}
    },
    data: {
      simpleData: {
        enable: true
      }
    },
    callback: {
      onClick: treeOnClick
    }
  };

  //部门树形结构配置
  var conditionsSetting = {
    check: {
      chkboxType: {"Y": "s", "N": "s"}
    },
    data: {
      simpleData: {
        enable: true
      }
    },
    callback: {
      onClick: conditionsTreeOnClick
    }
  };


  /**
   * 按钮点击事件
   * @param showValue
   * @param hideValue
   */
  function btnOnClick(showValue,hideValue){
    $("#showValue").append(" " + showValue + " ");
    $("#hideValue").append(" " + hideValue + " ");
  }

  //获取url传过来的参数
  function getUrlParam(name) { //封装方法
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
  }

  /**
   * 获取字典选项
   * @param dictType
   */
  function getDictOption(dictType) {
    $.ajax({
      url: window.parent.getBackUrl() + "/system/dict/data/dictType/"+dictType,
      dataType: 'json',
      type: "GET",
      async: false,
      cache: false,
      headers: {
        'Authorization':window.parent.getToken(),
      },
      success: function (data) {
        var dictList = data.data;
        var dictHtml = "";
        for (var i = 0; i < dictList.length ; i++) {
          var dict = dictList[i];
          dictHtml += '<option value="'+dict.dictValue+'">'+dict.dictLabel+'</option>';
        }
        $("#dictOption").html(dictHtml);
      }
    });
  }

  /**
   * 查询部门数据
   */
  function getDeptData() {
    $.ajax({
      url: window.parent.getBackUrl() + "/wf/approver/deptData",
      dataType: 'json',
      type: "GET",
      async: false,
      cache: false,
      headers: {
        'Authorization':window.parent.getToken(),
      },
      success: function (data) {
        $.fn.zTree.init($("#dept_tree"), conditionsSetting, data.data);
      }
    });
  }

  //获取用户数据
  function getUserData() {
    $.ajax({
      url: window.parent.getBackUrl() + "/wf/approver/userData",
      dataType: 'json',
      type: "GET",
      async: false,
      cache: false,
      headers: {
        'Authorization':window.parent.getToken(),
      },
      success: function (data) {
        $.fn.zTree.init($("#user_tree"), conditionsSetting, data.data);
      }
    });

  }


  /**
   * 条件选择tree的点击事件
   */
  function conditionsTreeOnClick(e, treeId, treeNode) {




  }

  //节点点击事件
  // Long
  // String
  // Integer
  // Double
  // BigDecimal
  // Date
  // User
  // Office
  function treeOnClick(e, treeId, treeNode) {
    var openHtml = "";
    var area =[];
    // -----------------弹出之前
    //字典
    if ("" !== treeNode.dictType && treeNode.dictType !== null && treeNode.dictType !== undefined ){
      openHtml = $("#dictHtml").html();
    }else
    // 审批意见enum
    if(treeNode.enumValues !== undefined){
      openHtml = $("#dictHtml").html();
    }
    else
    // 数字
    if(treeNode.type === 'Integer' || treeNode.type === 'Double'  || treeNode.type === 'BigDecimal'){
      openHtml = $("#numberHtml").html();
    }else
    // 部门
    if(treeNode.type === 'Office'){
      openHtml = $("#officeHtml").html();
      area = ['500px', '90%'];
    }else
    // 用户
    if(treeNode.type === 'User'){
      openHtml = $("#userHtml").html();
      area = ['500px', '90%'];
    }else{
      openHtml = $("#otherHtml").html();
    }



    layer.open({
      title: treeNode.name
      ,area: area
      ,type:1
      ,btn: ['确认']
      ,content: openHtml
      ,yes: function(index, layero){
        var res = conditionClick(treeNode)
        if (res != false){
          layer.close(index);
        }else {
          return false
        }
      }
    });

    // -----------------弹出之后
    //字典
    if ("" !== treeNode.dictType && treeNode.dictType !== null && treeNode.dictType !== "" && treeNode.dictType !== undefined){
      //获取字典
      getDictOption(treeNode.dictType);
    }else if(treeNode.enumValues !== undefined){
      for (var i = 0; i < treeNode.enumValues.length; i++) {
        var dictHtml = "";
        for (var i = 0; i < treeNode.enumValues.length ; i++) {
          var dict = treeNode.enumValues[i];
          dictHtml += '<option value="'+dict.id+'">'+dict.name+'</option>';
        }
        $("#dictOption").html(dictHtml);
      }
    }else
    // 数字
    if(treeNode.type === 'Integer' || treeNode.type === 'Double'  || treeNode.type === 'BigDecimal'){
      openHtml = $("#numberHtml").html();
    }else
    // 部门
    if(treeNode.type === 'Office'){
      getDeptData();
    }else
    // 用户
    if(treeNode.type === 'User'){
      getUserData();
    }
  }

  // 条件确认点击时间
  function conditionClick(treeNode) {
    var hideOperation = $('#operation option:selected').val();

    if (hideOperation !== 'empty' && hideOperation !== 'not empty'){

      if ("" !== treeNode.dictType && treeNode.dictType !== null && treeNode.dictType !== undefined){
        var showValue = $('#dictOption option:selected').text();
        var hideValue = $('#dictOption option:selected').val();
        if (hideValue === null || hideValue === ''){
          layer.msg("请选择相比值");
          return false
        }
        writeCondition(treeNode,showValue,hideValue)
      }else
      if(treeNode.enumValues !== undefined){
        var showValue = $('#dictOption option:selected').text();
        var hideValue = $('#dictOption option:selected').val();
        if (hideValue === null || hideValue === ''){
          layer.msg("请选择相比值");
          return false
        }
        writeCondition(treeNode,showValue,hideValue)
      }else
      if(treeNode.type === 'Integer' || treeNode.type === 'Double'  || treeNode.type === 'BigDecimal'){
        var number = $("#number").val();
        if (number == null || number ==''){
          layer.msg("请输入相比值");
        }else{
          writeCondition(treeNode,number,number)
        }
      }
      else
        // 部门
      if(treeNode.type === 'Office'){
        var officeTree = $.fn.zTree.getZTreeObj("dept_tree");
        var selectedNodes = officeTree.getSelectedNodes();
        if (selectedNodes.length == 0){
          layer.msg("请选择部门");
          return false
        }else{
          writeCondition(treeNode,selectedNodes[0].name,selectedNodes[0].id)
        }

      }else
        //用户
      if(treeNode.type === 'User'){
        var officeTree = $.fn.zTree.getZTreeObj("user_tree");
        var selectedNodes = officeTree.getSelectedNodes();
        if (selectedNodes.length == 0){
          layer.msg("请选择用户");
          return false
        }else{
          if ((selectedNodes[0].id.indexOf("temp_") != -1)) {
            layer.msg("不能选择部门,请选择用户");
            return false
          }
          writeCondition(treeNode,selectedNodes[0].name,selectedNodes[0].id)
        }
      }else{
        var otherInput = $("#otherInput").val();
        if (otherInput == null || otherInput ==''){
          layer.msg("请输入相比值");
        }else{
          writeCondition(treeNode,otherInput,otherInput)
        }
      }
    }else {
      var prefix = 'act_form';
      if (treeNode.prefix != undefined){
        prefix = treeNode.prefix;
      }

      var hideOperationText = $('#operation option:selected').text();

      $("#showValue").append(" " + treeNode.name + " " + hideOperationText);
      $("#hideValue").append(hideOperation + " " + prefix + '_' + treeNode.value + " ");
    }



  }

  /**
   * 写入条件
   */
  function writeCondition(treeNode,showValue,hideValue) {

    var prefix = 'act_form';
    if (treeNode.prefix != undefined){
      prefix = treeNode.prefix;
    }

    $("#showValue").append(" " + treeNode.name + " ");
    $("#hideValue").append(" " + prefix + '_' + treeNode.value + " ");

    var showOperation = $('#operation option:selected').text();
    var hideOperation = $('#operation option:selected').val();

    $("#showValue").append(" " + showOperation + " ");
    $("#hideValue").append(" " + hideOperation + " ");

    $("#showValue").append(" " + showValue + " ");
    if(treeNode.type === 'Integer' || treeNode.type === 'Double'  || treeNode.type === 'BigDecimal'){
      $("#hideValue").append(" " + hideValue + " ");
    }else{
      $("#hideValue").append(" '" + hideValue + "' ");
    }


  }

  /**
   * 保存
   */
  function saveConditions() {
    var customListeners = $("#customListeners").val();
    var showValue = $("#showValue").html();
    var hideValue = $("#hideValue").html();
    if(customListeners !== ""){
      layer.confirm('您配置了自定义监听器,其他配置均会失效,是否确认保存?',{}, function (index, layero) {
          window.parent.setConditionsValue(customListeners,customListeners,'1');
          layer.close(index);
          window.parent.layer.msg("保存成功")
          window.parent.closeLayer();
        }, function (index) {
        }
      );
    }else{
      window.parent.setConditionsValue(showValue,hideValue,'0');
      window.parent.layer.msg("保存成功")
      window.parent.closeLayer();
    }



  }

  // 页面执行完初始化数据
  $(document).ready(function () {
    // 加载表单属性
    getFormField();
    // 加载流程属性
    getProcessProperties();


    var oldValue = window.parent.oldValueTemp;
    var oldValue=oldValue.split('\"');
    if(oldValue.length > 1 && window.parent.oldValueTemp.indexOf("conditionsListener.conditions")!="-1"){
      //历史选中的值
      $("#oldValue").html(oldValue[1])
    }else{
      $("#oldValue").html(oldValue)
      $("#customListeners").val(oldValue)
    }

  });

</script>

<!--用户条件代码模板-->
<script type="text/template" id="userHtml">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">操作符：</label>
      <div class="layui-input-block">
        <select id ="operation" >
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
          <option value="gt">大于</option>
          <option value="lt">小于</option>
          <option value="ge">大于等于</option>
          <option value="le">小于等于</option>
          <option value="empty">为空</option>
          <option value="not empty">不为空</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" >相比值：</label>
      <div class="layui-input-block" style="height: 200px;overflow: auto;width: 100%;">
        <ul id="user_tree" class="ztree"></ul>
      </div>
    </div>
  </div>
</script>

<!--部门条件代码模板-->
<script type="text/template" id="officeHtml">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">操作符：</label>
      <div class="layui-input-block">
        <select id ="operation" >
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
          <option value="gt">大于</option>
          <option value="lt">小于</option>
          <option value="ge">大于等于</option>
          <option value="le">小于等于</option>
          <option value="empty">为空</option>
          <option value="not empty">不为空</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" >相比值：</label>
      <div class="layui-input-block" style="height: 200px;overflow: auto;width: 100%;">
        <ul id="dept_tree" class="ztree"></ul>
      </div>
    </div>
  </div>
</script>

<!--数字格式代码模板-->
<script type="text/template" id="numberHtml">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">操作符：</label>
      <div class="layui-input-block">
        <select id ="operation" >
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
          <option value="gt">大于</option>
          <option value="lt">小于</option>
          <option value="ge">大于等于</option>
          <option value="le">小于等于</option>
          <option value="empty">为空</option>
          <option value="not empty">不为空</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" >相比值：</label>
      <div class="layui-input-block">
        <input type="text"  class="layui-input number" id="number">
      </div>
    </div>
  </div>
</script>


<!--其他代码模板  -->
<script type="text/template" id="otherHtml">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">操作符：</label>
      <div class="layui-input-block">
        <select id ="operation" >
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
          <option value="gt">大于</option>
          <option value="lt">小于</option>
          <option value="ge">大于等于</option>
          <option value="le">小于等于</option>
          <option value="empty">为空</option>
          <option value="not empty">不为空</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" >相比值：</label>
      <div class="layui-input-block">
        <input type="text" class="layui-input" id="otherInput">
      </div>
    </div>
  </div>

</script>

<!--字典格式代码模板-->
<script type="text/template" id="dictHtml">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" >操作符：</label>
      <div class="layui-input-block">
        <select id ="operation" style="width: 200px">
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
          <option value="empty">为空</option>
          <option value="not empty">不为空</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" >相比值：</label>
      <div class="layui-input-block">
        <select style="width: 200px" id="dictOption">
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
          <option value="empty">为空</option>
          <option value="not empty">不为空</option>
        </select>
      </div>
    </div>
  </div>

</script>


</body>
</html>
